.loadding{
    position:relative ;
    width:500px;
    height: 500px;
  }
  
  .loadding::before ,.loadding::after{
    content:'';
    position: absolute;
    width:100px;
    height:100px;
    left:0;
    right: 0;
    top:0;
    bottom:0 ;
    margin:auto;
    background: black;
    border-radius:50%;
    animation:1.5s shade ;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .loadding::after{
    animation-delay:0.75s;
  }
  @keyframes shade{
    from {
      width:0; height:0; opacity:1;
    }
    to{
      width:150px; height:150px; opacity:0;
    }
    
  }